<template>
  <el-card class="mt-10">
    <div id="container"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "ChartMap",
};
</script>

<script lang="ts" setup>
import { onMounted } from "vue";
onMounted(() => {
  const script = document.createElement("script");
  //   回调函数要求：必须是一个在全局作用域的函数
  script.src =
    "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=gtjZyyBcpgDZ0AhWmmGisWqNjwBEp71Q&callback=initMap";

  // 全局方法
  window.initMap = () => {
    // 创建地图实例
    const map = new BMapGL.Map("container");
    // 设置中心点坐标
    const point = new BMapGL.Point(116.404, 39.915);
    // 地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 15);
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    // map.setHeading(64.5); //设置地图旋转角度
    // map.setTilt(73); //设置地图的倾斜角度

    // map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式

    // 添加控件
    let scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    let zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    let cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);
  };
  document.body.appendChild(script);
});
</script>

<style scoped>
#container {
  height: 600px;
}
</style>
